import { ref } from 'vue'
import { useMapStore } from '@/stores/map.js'
// 引入ol的交互式画笔
import { createDraw } from '@/Utils/createDraw.js'
// 引入拉框查询de中地接口
import { Query } from '@/Utils/Query.js'
// 引入多圈动画
import { setCanvas } from '@/Utils/setCanvas.js'
import { ElMessage } from 'element-plus'
import { useDialog } from '@/stores/dialogSwitch.js'
import { storeToRefs } from 'pinia'
import { useDialogEvents } from '@/stores/dialogEvents.js'
const { searchEvent } = storeToRefs(useDialogEvents())
const { searchEventDialogVisible } = storeToRefs(useDialog())
const { map } = storeToRefs(useMapStore())
// 定义画笔draw
let draw
// 定义多圈动画的点的位置坐标
let position = ref([])
// 定义多圈动画的图层数据源(在函数外面)
const high_source = new ol.source.Vector({})

export const useSearch = () => {
  // 搜索的属性名
  let select = ref('事件类型')
  // 搜索的关键字
  let search = ref()
  // enter或者离焦事件
  const options = [
    {
      value: '事件类型',
      label: '事件类型',
      children: [
        {
          value: '碰撞',
          label: '碰撞',
        },
        {
          value: '刮擦',
          label: '刮擦',
        },
        {
          value: '追尾',
          label: '追尾',
        },
        {
          value: '碾压',
          label: '碾压',
        },
        {
          value: '翻车',
          label: '翻车',
        },
        {
          value: '失火',
          label: '失火',
        },
        {
          value: '其他',
          label: '其他',
        },
      ],
    },
    {
      value: '事件等级',
      label: '事件等级',
      children: [
        {
          value: '1',
          label: '轻微事故',
        },
        {
          value: '2',
          label: '一般事故',
        },
        {
          value: '3',
          label: '重大事故',
        },
        {
          value: '4',
          label: '特大事故',
        },
      ],
    },
    {
      value: '发生地点',
      label: '发生地点',
    },
    {
      value: '驾驶员',
      label: '驾驶员',
    },
    {
      value: '车牌号',
      label: '车牌号',
    },
    {
      value: '处理状态',
      label: '处理状态',
      children: [
        {
          value: '0',
          label: '待处理',
        },
        {
          value: '1',
          label: '处理中',
        },
        {
          value: '2',
          label: '已归档',
        },
      ],
    },
  ]

  const keyUpSearch = () => {
    // 设置多圈动画的图层
    let canvas = setCanvas(map.value)
    const style = new ol.style.Style({
      image: new ol.style.Icon({
        img: canvas,
        imgSize: [canvas.width, canvas.height],
      }),
    })
    var high_layer = new ol.layer.Vector({
      source: high_source,
      title: '高亮图层',
      style,
    })
    map.value.addLayer(high_layer)
    // 清除多圈动画数据源
    high_source.clear()
    if (search.value) {
      var where = `${select.value} like '%${search.value}%'`
      var service = {
        name: 'guanggu',
        layerId: 2,
      }
      // 根据属性查询
      Query.queryByAttrSQL({
        service,
        where,
        callback: handleQuery,
      })
      // 注意这里的选择查询的事件数目为10000(可自定义)
      function handleQuery(res) {
        // console.log(res)
        if (res) {
          position.value = res
          //获取到选中事件的位置,设置多圈动画
          high_source.addFeatures(position.value)
          searchEventDialogVisible.value = true
          searchEvent.value = res.map((item) => {
            const obj = item.values_.values_
            obj.id_ = item.id_
            return obj
          })
        } else if (!res) {
          ElMessage({
            showClose: true,
            message: '无法查询到您想要的结果。请输入正确的关键字!!!',
            type: 'error',
            duration: 3000,
          })
        }
      }
    } else {
      ElMessage({
        showClose: true,
        message: '请输入的关键字不能为空!!!',
        type: 'error',
        duration: 3000,
      })
    }
  }

  return { options, select, search, keyUpSearch }
}
